<template>
  <div :class="inputStyle == 'hasBorder' ? 'default-border' : 'not-border'">
    <div
      :class="['input-box',focusStatus == 'focus' ? 'input-box-focus' : focusStatus == 'error' ? 'input-box-error' : '', disabled ? 'input-disabled' : '']">
      <input ref="gzInput" :type="type" :class="['gz-input']" :style="customStyle" v-model="modelValue"
             :placeholder="placeholder" :disabled="disabled" :autofocus="focus" :readonly="readonly"
             @input="input(modelValue)" @focus="handleFocus" @blur="handleBlur(modelValue)"/>
      <div style="flex-shrink: 0;margin-left: 1rem;" @click.stop="sendCode" v-if="sendStatus">
        <slot name="suffix">
          <a href="javascript:void(0);" class="getCode">
            <span v-if="oneTime">获取验证码</span>
            <span v-else>重新获取</span>
          </a>
          <!-- <button class="send-button">发送</button> -->
        </slot>
      </div>
      <div class="getCode" style="flex-shrink: 0;margin-left: 1rem;" v-else>
        <span>{{ sendTime }} s</span>
      </div>
    </div>
    <!--    <div class="valid-error" v-if="error">{{error}}</div>-->
  </div>
</template>

<script>
import formValidator from '@/service/form/formActiveValidate'

export default {
  name: 'gzInput',
  /**
   * type: 输入类型
   * value: 绑定的value值
   * validate: {Object} 验证规则（参考 @/service/form/formValidator中的rules）
   * desc: 说明(非title)
   * placeholder: 空占位提示
   * disabled: 是否可输入
   * focus: 是否默认选中
   * customStyle: {Object} 自定义input Style样式
   * readonly: 是否只读
   * inputStyle: 组件风格，(notBorder 无边框)
   * requestData: 请求接口发送的数据
   * requestUrl: 请求接口地址
   * requestMethod: 请求方式，如post、postForm、get
   * sendwaittime: 发送后，重新发送的等待时间
   */
  props: ['type', 'value', 'validate', 'placeholder', 'disabled', 'focus', 'customStyle', 'readonly', 'inputStyle',
    'requestData', 'requestUrl', 'requestMethod', 'sendwaittime'
  ],
  model: {
    prop: 'value',
    event: 'valueChange'
  },
  data() {
    return {
      modelValue: this.value ? this.value : '',
      error: '',
      focusStatus: 'default',
      abValidate: {},
      sendStatus: true,
      sendTime: null,
      oneTime: true,
      getCodeed: false
    }
  },
  mounted() {
    let directives = this.$vnode.data.directives ? this.$vnode.data.directives : []
    if (directives.length > 0) {
      let that = this
      directives.forEach((v) => {
        if (v.name == 'ab-validate') {
          that.abValidate = v.value
        }
      })
    }
  },
  methods: {
    input(e) {
      console.log("当前输入内容-------", e)
      if (!this.getCodeed) {
        this.$vux.toast.show({
          text: '请获取验证码',
          type: 'warn'
        })
        //清空输入的内容
        this.modelValue = ''
        return
      }
      this.$emit('valueChange', e)
    },

    handleFocus(e) {
      this.error = ''
      this.focusStatus = 'focus'
    },

    handleBlur(e) {
      let validate = this.validate ? this.validate : this.abValidate
      formValidator.activeValidate(e, validate).then(res => {
        this.error = ''
        this.focusStatus = 'default'
      }).catch(err => {
        this.error = err
        this.focusStatus = 'error'
      })
    },

    sendCode() {
      this.getCodeed = true
      //清空输入的内容
      this.modelValue = ''
      let data = this.requestData
      if (!data || !JSON.stringify(data) || !data.tel || data.tel.length != 11 || !data.instId) {
        this.$vux.toast.show({
          text: '请输入正确手机号或其他相关信息',
          type: 'warn'
        })
        return
      }
      let url = this.requestUrl ? this.requestUrl : this.__ctx + '/pub/plugin/message/sendOut'
      let method = this.requestMethod ? this.requestMethod : 'post'
      this.sendStatus = false
      let that = this
      that.sendTime = this.sendwaittime ? this.sendwaittime : 60
      let request = this.baseService[method](url, data)
      let timer = window.setInterval(() => {
        that.sendTime--
        if (that.sendTime <= 0) {
          that.sendStatus = true
          this.oneTime = false
          that.sendTime = null
          clearInterval(timer)
        }
      }, 1000)
      request.then((res) => {
        if (!res.isOk) {
          this.$vux.toast.show({
            text: res.msg,
            type: 'warn'
          })
        }
      })
      request.catch((err) => {
        this.$vux.toast.show({
          text: '发送失败！',
          type: 'warn'
        })
      })
      // if(!data) {
      //   this.$vux.toast.show({
      //     text: '请输入手机号',
      //     type: 'warn'
      //   })
      //   return
      // }
      // let request = this.baseService[method](url,data)
      // request.then(res => {

      // })
      // console.log('发送验证码！')
    }
  }
}
</script>

<style lang="less" scoped>
.getCode {
  color: var(--primary-color);
  font-family: HarmonyOS Sans SC;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  //letter-spacing: 0px;
  //text-align: right;
}

.weui-cell__bd .ab-invalid {
  border: 0px;
}

.send-button {
  color: #fff;
  background-color: #2d8cf0;
  border-color: #2d8cf0;
  outline: 0;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
  user-select: none;
  height: 32px;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 4px;
  transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
  // color: #515a6e;
  // background-color: #fff;
  // border-color: #dcdee2;
}

.send-button:active {
  background-color: #2b85e4;
  border-color: #2b85e4;
}

.send-button:hover {
  background-color: #57a3f3;
  border-color: #57a3f3;
}

.send-button:focus {
  box-shadow: 0 0 0 2px rgb(45, 140, 240, 0.2);
}
</style>
